<template>
  <div>
    <el-form ref="device" :model="equipment" label-width="80px">
      <el-form-item label="设备名称">
        <el-input v-model="equipment.name" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="equipment.type" placeholder="请选择类型" clearable>
          <el-option v-for="item in dict.type.sys_equip_type" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button>取消</el-button>
        <el-button @click="add">新增设备</el-button>
      </el-form-item>
    </el-form>
    <div class="container">
      <div class="list-container">
        <el-table :data="arr" style="width: 100%">
          <el-table-column label="序号" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备类型" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.type==0" >视频设备</span>
          <span style="margin-left: 10px" v-if="scope.row.type==1" >人脸卡口</span>
          <span style="margin-left: 10px" v-if="scope.row.type==2" >车辆卡口</span>
          <span style="margin-left: 10px" v-if="scope.row.type==3" >门禁设备</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
          </el-table>
        </div>
      </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.equipment.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.equipment.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.equipment.total">
    </el-pagination>


    <el-dialog :title=this.bb :visible.sync="dialogFormVisible">
      <el-form :model="device">
        <el-form-item label="国际编码" :label-width="formLabelWidth">
          <el-input v-model="device.internationalCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" :label-width="formLabelWidth">
          <el-input v-model="device.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" :label-width="formLabelWidth">
          <el-select v-model="device.type" placeholder="请选择类型" clearable>
            <el-option v-for="item in dict.type.sys_equip_type" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-select v-model="device.plotId" placeholder="请选择小区">
            <el-option v-for="item in plot" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-col :span="24">
        <el-form-item label="经度" prop="kqLongitude" :label-width="formLabelWidth">
          <el-input v-model="device.longitude" placeholder="自动带出" clearable :style="{ width: '100%' }" >
          </el-input>
        </el-form-item>
        </el-col>


          <el-col :span="24">
          <el-form-item label="纬度" prop="kqLatitude" :label-width="formLabelWidth">
            <el-input v-model="device.latitude" placeholder="自动带出" clearable :style="{ width: '100%' }" >
            </el-input>
          </el-form-item>
          </el-col>



        <div class="map-button">
          <div ref="gaode_Map" id="gaode_Map" style="width: 100%; height: 70vh; border: 1px solid #ccc;">
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">{{this.bb}}</el-button>
          </div>
          </div>



      </el-form>

    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {list, all,add,update,del} from "@/api/community/equipment";
import {plotList} from "@/api/community/population";
import AMapLoader from "@amap/amap-jsapi-loader";
import {map} from "core-js/internals/array-iteration";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
  dicts:[ 'sys_equip_type' ],
    data() {
      //这里存放数据"
      return {
        dataForm: {
          kqName: undefined,
          kqLocation: undefined,
          kqLongitude: undefined,
          kqLatitude: undefined,
          kqWorkUnit: undefined,
          cronkqAccredit: [],
          kqValidCardRange: undefined,
        },
        equipmentTypes: [], // 初始化为空数组
        arr:[],
        toadd:[{
            image: "http://47.103.88.49:8888/group1/M00/00/01/rBdcEmacukOAZgJCAACINwGzXqw692.png",
            // 小区名称字段
            communityName: "北京四合院",
            // 楼栋
            building: "1号楼",
            // 住户数
            households: 100,
            // 实有人口数
            actualPopulation: 300,
            // 实有设备数
            actualDevices: 50,
            // 实有力量数（这个字段可能比较模糊，具体含义根据实际需求来）
            actualForces: 20,
            // 实有车辆数
            actualVehicles: 10,
            // 实有单位数
            actualUnits: 5,
            // 小区地址
            address:"湖北武汉市关山大道320号"
          }
        ],
        markers: [],
        position: {},
        map: null,
        lnglat: [],

        equipment:{
          pageNum:1,
          pageSize:5,
          total:1
        },
        longitude: null,
        latitude: null,
        lists:[],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        device:{
          longitude: null,
          latitude: null,
          type:'',

        },
        bb:"新增设备",
        cc:1,
        plot:[]
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      initMap() {
        let centerLen = [116.397452, 39.90918];

        AMapLoader.load({
          key: "085f7d1a48acc9b9611b99096b0a0589",
          version: "2.0",
          plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder", 'AMap.ToolBar', 'AMap.Scale', 'AMap.DistrictSearch']
        })
          .then((AMap) => {
            this.Amap = AMap;

            this.map = new AMap.Map("gaode_Map", {
              viewMode: "3D",
              zoom: 18,
              center: centerLen,
              resizeEnable: true
            });
            this.map.on("click", this.clickMapHandler);
          })
          .catch((e) => {
            console.error(e);
          });
      },
      clickMapHandler(e) {
        this.device.longitude = e.lnglat.getLng();
        this.device.latitude = e.lnglat.getLat();
        this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
        alert(this.lnglat);
        this.setMarker(this.lnglat);
      },
//  添加标记
      setMarker(lnglat) {
        this.removeMarker();
        let marker = new AMap.Marker({
          position: lnglat,
        });
        marker.setMap(this.map);
        this.markers.push(marker);
      },
      handleDelete(equipment){
        del(equipment.id).then(
          res => {
            this.$message.success(res.msg)
            this.list()
          }
        )
      },
      plotList(){
        plotList().then(
          res => {
            this.plot=res.data
          }
        )
      },
      handleEdit(equipment){
        this.dialogFormVisible=true
        this.cc=2
        this.device=equipment
        this.device.type=String(equipment.type)
        console.log(this.device)
      },
      update(){
        if(this.cc=1){
          add(this.device).then(
            res => {
              this.$message.success(res.msg)
              this.dialogFormVisible=false
              this.list()
            }
          )
        }
        if(this.cc=2){
          update(this.device).then(
            res => {
              this.$message.success(res.msg)
              this.dialogFormVisible=false
              this.list()
            }
          )
        }
      },
      // 删除之前后的标记点
      removeMarker() {
        if (this.markers) {
          this.map.remove(this.markers);
        }
      },
      add(){
        this.device={}
        this.dialogFormVisible=true
        if(this.dialogFormVisible){
          this.initMap()
        }
      },
      onSubmit(){
        this.list()
      },
      all(){
        all().then(
          res => {
            console.log(res)
            this.lists=res.data
          }
        )
      },
      handleSizeChange(val) {
        console.log(val)
        this.equipment.pageSize=val
        this.list()
      },
      handleCurrentChange(val) {
        console.log(val)
        this.equipment.pageNum=val
        this.list()
      },
      list(){
        list(this.equipment).then(
          res => {
            this.equipment.total=res.total
            this.equipment.total=res.data.total
            this.arr=res.data.list
          }
        )
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.plotList(); // 在组件创建时获取 plot 数据

    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
      this.list()
      this.all()
      this.plotList()
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap; /* 允许子项在必要时换行 */
}

.card-container {
  flex: 1; /* 允许卡片容器扩展以填充可用空间 */
  margin-right: 20px; /* 在卡片和列表之间添加一些间距 */
  overflow: auto; /* 如果内容超出，允许滚动 */
}

.list-container {
  flex: 2; /* 列表容器将占用两倍于卡片容器的大小 */
  overflow: auto; /* 如果内容超出，允许滚动 */
}

.text {
  margin: 0;
}
.blue-black-background {
  background-color: #2b2b5b; /* 蓝黑色 */
}


.text.item.bold {
  font-weight: bold;
  color: white;
}

.text.item.orange {
  font-weight: bold;
  color: orange;
}

.text.item.blue-green {
  font-weight: bold;
  color: #008B8B; /* 蓝绿色 */
}
</style>
